<template>
  <el-main class="register-apply">
    <el-row type="flex" justify="center">
      <h2>当前业务办理：商标专用权质权登记</h2>
    </el-row>
    <el-row type="flex" justify="center">
      <h3>当前业务办理：质权人信息</h3>
    </el-row>
    <el-row>
      <el-col :span="10" :offset="2">
        申请人类型:
        <span>*</span>
        <el-select v-model="value" placeholder="企业/单位申请">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="10" :offset="2">
        <div>
          有效执照:
          <span class="dot">*</span>
          <el-button type="success" @click="licenseUpload = true">选择图片</el-button>
        </div>
        <el-image
          v-for="(item,index) in licensePic"
          :key="index"
          style="width: 100px; height: 100px"
          :src="item.url"
          fit="cover"
          :preview-src-list="preList"
        ></el-image>
      </el-col>
    </el-row>
    <el-row type="flex" justify="star" v-if="value == '自然人'">
      <el-col :span="10" :offset="2">
        <div>
          身份证扫描件:
          <span class="dot">*</span>
          <el-button type="success" @click="IDCardUpload = true">选择图片</el-button>
        </div>
        <!-- 图片预览 -->
        <el-image
          v-for="(item,index) in IDCardPre"
          :key="index"
          style="width: 100px; height: 100px"
          :src="item"
          fit="cover"
          :preview-src-list="IDCardPre"
        ></el-image>
      </el-col>
      <el-col :span="10" :offset="2"></el-col>
    </el-row>
    <el-row></el-row>
    <div class="button">
      <el-button type="success" @click="submitVerify">提交验证证件信息</el-button>
    </div>
    <!-- 有效执照上传对话框 -->
    <el-dialog title="提示" :visible.sync="licenseUpload" center>
      <span>需要注意的是内容是默认不居中的</span>
      <!-- 选择图片 -->
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :file-list="licensePic"
        :on-change="changeLicense"
        :limit="10"
        :on-exceed="exceesLimitLicense"
        multiple
        drap
      >
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="removeLice(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="licenseUpload = false">取 消</el-button>
        <el-button type="primary" @click="licenseUpload = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 身份证件上传对话框 -->
    <el-dialog title="提示" :visible.sync="IDCardUpload" center>
      <span>需要注意的是内容是默认不居中的</span>
      <!-- 选择图片 -->
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :file-list="IDCardPic"
        :on-change="changeIDCard"
        :limit="2"
        :on-exceed="exceesLimitIDCard"
        multiple
        drap
      >
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="removeIDCard(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="IDCardUpload = false">取 消</el-button>
        <el-button type="primary" @click="IDCardUpload = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-main>
</template>
<script>
export default {
  data() {
    return {
      // 删除图片按钮
      disabled: false,
      // 执照上传对话框
      licenseUpload: false,
      // 执照图片
      licensePic: [],
      // 身份证上传对话框
      IDCardUpload: false,
      IDCardPic: [],
      // 图片上传
      uploadDialogVisible: false,
      // select选项
      options: [
        {
          value: "企业/单位申请",
          label: "企业/单位申请"
        },
        {
          value: "自然人",
          label: "自然人"
        },
        {
          value: "其他",
          label: "其他"
        }
      ],
      // 申请人类型
      value: ""
    };
  },

  methods: {
    // 执照切换
    changeLicense(file, fileList) {
      console.log(typeof file.raw);
      this.licensePic = fileList;
      // this.licensePic.push(file);
    },
    // 删除执照
    removeLice(file) {
      const index = this.licensePic.findIndex(el => el.uid === file.uid);
      index !== -1 && this.licensePic.splice(index, 1);
    },
    // 身份证切换
    changeIDCard(file, fileList) {
      this.IDCardPic = fileList;
      // this.IDCardPic.push({ name: file.name, url: file.url, id: file.uid });
    },
    // 删除身份证图片
    removeIDCard(file) {
      const index = this.IDCardPic.findIndex(el => el.uid === file.uid);
      index !== -1 && this.IDCardPic.splice(index, 1);
    },
    // 身份证图片数量超出限制
    exceesLimitIDCard() {
      alert("图片数量超出限制");
    },
    // 执照图片超出限制
    exceesLimitLicense() {
      alert("图片数量超出限制");
    },
    // goInfor() {
    //   this.$router.push({
    //     path: "/infor"
    //   });
    submitVerify() {
      // console.log(this.licensePic);
      // console.log(this.IDCardPic);
      var data = new FormData();
      this.licensePic.forEach(el => {
        data.append("LicenseImgs", el.raw);
      });
      this.IDCardPic.forEach(el => {
        data.append("idCardImgs", el.raw);
      });

      data.append("appType", 2);
      data.append("apptype_id", 1);
      data.append("business_id", 1);
      data.append("type_id", 1);
      data.append("user_id", 1);
      data.append("flag", 1);
      data.append("subtype_id", 2);
      data.append("code_num", 1);
      this.$http({
        method: "post",
        url: "http://192.168.0.193:8080/distinguish/idCardAndbusLicense",
        data,
        header: {
          "Content-Type": 'multipart/form-data"'
        }
      }).then(res => {
        console.log(res);
      });
    }
  },
  computed: {
    // 执照预览数组
    preList() {
      return this.licensePic.map(el => {
        return el.url;
      });
    },
    // 证件照预览数组
    IDCardPre() {
      return this.IDCardPic.map(el => {
        return el.url;
      });
    }
  }
};
</script>
<style lang="less" scope>
.register-apply {
  background-color: #fff;
  .el-row {
    min-height: 50px;
    margin: 5px 0;
    h2 {
      font-size: 20px;
    }
  }
  .el-col {
    & > span {
      padding: 0 10px;
      color: red;
    }
  }
  .el-upload .el-upload-dragger {
    width: 100%;
    height: 100%;
  }
  .button {
    text-align: center;
    border-top: 1px solid gray;
    padding: 10px 0;
  }
  .el-image {
    margin: 5px;
  }
  .dot {
    padding: 0 10px;
    color: red;
  }
  .el-upload-list__item > div {
    height: 100%;
  }
  .el-upload-list__item-thumbnail {
    object-fit: cover;
  }
}
</style>